<template>
  <div class="user-center-container">
    <div class="page-header">
      <h1>个人中心</h1>
      <p>管理您的个人信息</p>
    </div>
    
    <div class="content-wrapper">
      <div class="info-card">
        <div class="card-header">
          <h2>个人信息</h2>
          <button 
            class="edit-btn" 
            @click="isEditing = !isEditing"
            :disabled="isLoading"
          >
            {{ isEditing ? '取消' : '编辑' }}
          </button>
        </div>
        
        <div class="card-body">
          <form @submit.prevent="handleSubmit">
            <div class="form-group">
              <label for="username">用户名</label>
              <input 
                type="text" 
                id="username" 
                v-model="userForm.username" 
                :disabled="true"
                class="form-control"
              />
            </div>
            
            <div class="form-group">
              <label for="realName">真实姓名</label>
              <input 
                type="text" 
                id="realName" 
                v-model="userForm.realName" 
                :disabled="!isEditing"
                class="form-control"
              />
            </div>
            
            <div class="form-group">
              <label for="email">邮箱</label>
              <input 
                type="email" 
                id="email" 
                v-model="userForm.email" 
                :disabled="!isEditing"
                class="form-control"
              />
            </div>
            
            <div class="form-group">
              <label for="phone">手机号</label>
              <input 
                type="tel" 
                id="phone" 
                v-model="userForm.phone" 
                :disabled="!isEditing"
                class="form-control"
              />
            </div>
            
            <div class="form-group">
              <label for="userType">用户类型</label>
              <select 
                id="userType" 
                v-model="userForm.userType" 
                :disabled="true"
                class="form-control"
              >
                <option value="1">普通用户</option>
                <option value="2">企业用户</option>
                <option value="3">管理员</option>
              </select>
            </div>
            
            <div class="form-group" v-if="userForm.enterpriseId">
              <label>企业ID</label>
              <input 
                type="text" 
                v-model="userForm.enterpriseId" 
                disabled
                class="form-control"
              />
            </div>
            
            <div class="form-actions" v-if="isEditing">
              <button 
                type="submit" 
                class="submit-btn" 
                :disabled="isLoading"
              >
                {{ isLoading ? '保存中...' : '保存' }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getUserInfo, updateUser } from '@/apis/user';
import { ElMessage } from 'element-plus';

// 状态管理
const userForm = ref({
  id: null,
  username: '',
  realName: '',
  email: '',
  phone: '',
  userType: 1,
  enterpriseId: null,
  departmentId: null
});

const isEditing = ref(false);
const isLoading = ref(false);

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    isLoading.value = true;
    const response = await getUserInfo();
    if (response.data) {
      userForm.value = {
        ...response.data,
        // 确保数字类型正确
        userType: Number(response.data.userType),
        enterpriseId: response.data.enterpriseId ? Number(response.data.enterpriseId) : null,
        departmentId: response.data.departmentId ? Number(response.data.departmentId) : null
      };
    }
  } catch (error) {
    console.error('获取用户信息失败:', error);
    ElMessage.error('获取用户信息失败，请稍后重试');
  } finally {
    isLoading.value = false;
  }
};

// 提交表单
const handleSubmit = async () => {
  try {
    isLoading.value = true;
    
    // 准备更新数据，只包含可编辑字段
    const updateData = {
      realName: userForm.value.realName,
      email: userForm.value.email,
      phone: userForm.value.phone
    };
    
    await updateUser(userForm.value.id, updateData);
    ElMessage.success('信息更新成功');
    isEditing.value = false;
  } catch (error) {
    console.error('更新用户信息失败:', error);
    ElMessage.error('更新失败，请稍后重试');
  } finally {
    isLoading.value = false;
  }
};

// 页面挂载时获取用户信息
onMounted(() => {
  fetchUserInfo();
});
</script>

<style scoped>
.user-center-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h1 {
  font-size: 28px;
  color: #333;
  margin-bottom: 10px;
}

.page-header p {
  font-size: 16px;
  color: #666;
}

.content-wrapper {
  display: flex;
  justify-content: center;
}

.info-card {
  width: 100%;
  max-width: 800px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fafafa;
}

.card-header h2 {
  font-size: 20px;
  color: #333;
  margin: 0;
}

.edit-btn {
  padding: 8px 20px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.edit-btn:hover:not(:disabled) {
  background-color: #66b1ff;
}

.edit-btn:disabled {
  background-color: #c0c4cc;
  cursor: not-allowed;
}

.card-body {
  padding: 30px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.form-control {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-sizing: border-box;
  transition: border-color 0.3s;
}

.form-control:focus {
  outline: none;
  border-color: #409eff;
}

.form-control:disabled {
  background-color: #f5f7fa;
  cursor: not-allowed;
}

.form-actions {
  margin-top: 30px;
  text-align: right;
}

.submit-btn {
  padding: 10px 30px;
  background-color: #67c23a;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.submit-btn:hover:not(:disabled) {
  background-color: #85ce61;
}

.submit-btn:disabled {
  background-color: #c0c4cc;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .user-center-container {
    padding: 10px;
  }
  
  .card-header,
  .card-body {
    padding: 15px;
  }
}
</style>